<template>
    <el-form ref="form" :rules="ruleCustom" :model="form">
        <el-form-item prop="username" label="账号">
            <el-input v-model="form.username" placeholder="请输入1-20位字符" :maxlength="20"/>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
            <el-input v-model="form.name" placeholder="请输入1-12位字符" :maxlength="12"/>
        </el-form-item>
        <el-form-item prop="passwd" label="新密码">
            <el-input v-model="form.passwd" placeholder="请输入6-12位字符" :maxlength="12"/>
        </el-form-item>
        <el-form-item prop="passwdCheck" label="确认密码">
            <el-input v-model="form.passwdCheck" placeholder="请输入6-12位字符" :maxlength="12"/>
        </el-form-item>
        <p class="text-center">
            <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
        </p>
    </el-form>
</template>

<script>
    import {saveAccount} from "@/api";

    export default {
        data() {
            // 密码验证
            const validatePass = (rule, value, callback) => {
                if (this.form.passwdCheck !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.form.validateField('passwdCheck');
                }
                callback();
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value !== this.form.passwd) {
                    callback(new Error('两次输入密码不相同'));
                } else {
                    callback();
                }
            };
            return {
                form: {
                    id: 0,
                    username: '',
                    passwd: '',
                    passwdCheck: ''
                },
                //验证信息
                ruleCustom: {
                    username: [
                        {required: true, message: '账号不能为空', trigger: 'blur'},
                        {max: 20, min: 1, message: '账号为1到20位字符', trigger: 'blur'},
                    ]
                    , name: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'},
                        {max: 12, min: 1, message: '姓名为1到12位字符', trigger: 'blur'},
                    ]
                    , passwd: [
                        {max: 12, min: 6, message: '密码为6到12位字符', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'}
                    ]
                    , passwdCheck: [
                        {max: 12, min: 6, message: '密码为6到12位字符', trigger: 'blur'},
                        {validator: validatePassCheck, trigger: 'blur'}
                    ]
                }
                , loading: false
            }
        }
        , props: ['pdata']
        , created() {
            this.form = {
                id: this.pdata.id,
                username: this.pdata.account,
                name: this.pdata.name,
                passwd: '',
                passwdCheck: ''
            };
        }
        , methods: {
            //确认修改
            submit() {
                this.$submit(this.$refs['form'], () => {
                    this.loading = true;
                    saveAccount(this.form, () => {
                        this.$emit('close', true);
                        this.loading = false;
                    }, () => {
                        this.loading = false;
                    })
                })
            }
        }
    }
</script>
<style>

</style>
